<template>
  <div
    class="widget-panel1 no-event-parent relative inset-shadow"
    :class="direction"
  >
    <div class="full-widht" style="min-height: 44px"></div>
    <div
      class="widget-panel-title1 title-2 no-select flex align-center justify-center color-white"
      :style="{ width: titleWidth }"
    >
      {{ title }} <slot name="title"></slot>
    </div>
    <slot />
  </div>
</template>

<script>
export default {
  name: "WidgetPanel",
  props: {
    title: {
      type: String,
      default: "标题",
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
    icon: {
      type: String,
      default: "el-icon-setting",
    },
    direction: {
      type: String,
      default: "left",
    },
    titleWidth: {
      type: String,
      default: "100%",
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/backgrounds.scss";
.widget-panel1 {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  width: 430px;
  height: 49%;
  border-top: 2px solid rgba(14, 110, 127, 0.8);
  background-image: linear-gradient(
    to bottom,
    rgba(14, 110, 127, 0.1),
    rgba(14, 110, 127, 0)
  );
  &.right {
    align-items: flex-end;
  }
  .widget-panel-title1 {
    position: absolute;
    left: 0px;
    top: -2px;
    height: 44px;
    width: 100%;
    font-size: 22px;
    font-family: "Microsoft YaHei UI";
    color: #ffffff;
    line-height: 44px;
    text-align: center;
    background-image: url(/imgs/title2.png);
    background-repeat: no-repeat;
    background-size: 120%;
    background-position: center;
  }
  &::before,
  &::after {
    content: " ";
    position: absolute;
    top: 0;
    height: 100%;
    width: 2px;
    z-index: 1;
    background-image: linear-gradient(
      to bottom,
      rgba(14, 110, 127, 0.8),
      rgba(14, 110, 127, 0)
    );
  }
  &::before {
    left: 0;
  }
  &::after {
    right: 0;
  }
  .widget-panel-title {
    padding: 6px 8px;
    width: 350px;
    margin-bottom: 18px;
  }
  &.left .widget-panel-title {
    background: linear-gradient(
      90deg,
      $background-black 0,
      rgba(0, 0, 0, 0) 0.65
    );
    span {
      margin-right: 8px;
    }
  }
  &.right .widget-panel-title {
    flex-direction: row-reverse;
    background: linear-gradient(
      -90deg,
      $background-black 0,
      rgba(0, 0, 0, 0) 0.65
    );
    span {
      margin-left: 8px;
    }
  }
}
</style>
